<template>
  <div class="flex h-screen bg-gray-100 overflow-hidden">
    <!-- 左侧导航栏（不变） -->
    <div class="w-64 bg-gray-800 text-white flex-shrink-0">
      <div class="p-4 border-b border-gray-700">
        <h1 class="text-xl font-bold flex items-center">
          <i class="fa fa-graduation-cap mr-2"></i>学生管理系统
        </h1>
      </div>

      <nav class="p-4 space-y-1">
        <router-link
            to="/students"
            class="block px-4 py-2 rounded hover:bg-gray-700 transition-colors flex items-center"
            active-class="bg-gray-700"
        >
          <i class="fa fa-users w-6"></i> 学生列表
        </router-link>
        <router-link
            to="/courses"
            class="block px-4 py-2 rounded hover:bg-gray-700 transition-colors flex items-center"
            active-class="bg-gray-700"
        >
          <i class="fa fa-book w-6"></i> 课程信息
        </router-link>
        <router-link
            to="/grades"
            class="block px-4 py-2 rounded hover:bg-gray-700 transition-colors flex items-center"
            active-class="bg-gray-700"
        >
          <i class="fa fa-line-chart w-6"></i> 成绩管理
        </router-link>
        <router-link
            to="/settings"
            class="block px-4 py-2 rounded hover:bg-gray-700 transition-colors flex items-center"
            active-class="bg-gray-700"
        >
          <i class="fa fa-cog w-6"></i> 系统设置
        </router-link>
      </nav>
    </div>

    <!-- 右侧内容区域（不变） -->
    <div class="flex-1 overflow-y-auto p-6">
      <router-view /> <!-- 路由匹配的组件在这里显示 -->
    </div>
  </div>
</template>

<script setup>
// 1. 导入所有功能组件（供路由使用）
const Students = {
  template: `
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-xl font-semibold mb-4 flex items-center">
        <i class="fa fa-users mr-2 text-gray-500"></i>学生列表
      </h2>
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(student, index) in students" :key="student.id" class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ index + 1 }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ student.name }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ student.id }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ student.major }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  `,
  setup() {
    let students = [
      { name: '张三', id: '2023001', major: '计算机科学' },
      { name: '李四', id: '2023002', major: '电子工程' },
      { name: '王五', id: '2023003', major: '软件工程' },
      { name: '赵六', id: '2023004', major: '数据科学' },
      { name: '钱七', id: '2023005', major: '人工智能' }
    ];
    return { students };
  }
};

const Courses = { /* 课程组件代码不变，直接复制你原来的 */ };
const Grades = { /* 成绩组件代码不变，直接复制你原来的 */ };
const Settings = { /* 设置组件代码不变，直接复制你原来的 */ };

// 2. 导出组件（供路由文件导入）
export { Students, Courses, Grades, Settings };
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>